<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>响应码说明</title>
    <link href="/static/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        .card {
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            border: none;
            border-radius: 12px;
            overflow: hidden;
        }
        
        .card-header {
            background: #fff;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            padding: 1rem 1.25rem;
        }
        
        .card-header h5 {
            color: #2c3e50;
            font-weight: 600;
            margin: 0;
        }

        .table th {
            background: #f8fafc;
            font-weight: 600;
            color: #2c3e50;
        }

        .status-badge {
            font-size: 0.85rem;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-weight: 500;
        }

        .status-2xx { background: #e6f4ea; color: #1e8e3e; }
        .status-4xx { background: #fef7e6; color: #e67700; }
        .status-5xx { background: #fce8e8; color: #d93025; }

        .code-block {
            background: #f8fafc;
            border-radius: 8px;
            padding: 1.25rem;
            margin-top: 1.5rem;
        }

        .code-block pre {
            margin: 0;
            color: #2c3e50;
        }

        .code-title {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
        }

        .code-title i {
            margin-right: 0.5rem;
            color: #94a3b8;
        }
    </style>
</head>
<body>
    <div class="card">
        <div class="card-header">
            <h5>响应码说明</h5>
        </div>
        <div class="card-body">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th style="width: 120px">状态码</th>
                        <th style="width: 200px">状态</th>
                        <th>说明</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 2xx 成功 -->
                    <tr>
                        <td><span class="status-badge status-2xx">200</span></td>
                        <td>SUCCESS</td>
                        <td>服务器成功返回请求数据</td>
                    </tr>
                    <tr>
                        <td><span class="status-badge status-2xx">201</span></td>
                        <td>CREATED</td>
                        <td>新建或修改数据成功</td>
                    </tr>
                    <tr>
                        <td><span class="status-badge status-2xx">202</span></td>
                        <td>ACCEPTED</td>
                        <td>一个请求已经进入后台排队(异步任务)</td>
                    </tr>
                    <tr>
                        <td><span class="status-badge status-2xx">204</span></td>
                        <td>NO_CONTENT</td>
                        <td>删除数据成功</td>
                    </tr>

                    <!-- 4xx 客户端错误 -->
                    <tr>
                        <td><span class="status-badge status-4xx">400</span></td>
                        <td>BAD_REQUEST</td>
                        <td>发出信息有误</td>
                    </tr>
                    <tr>
                        <td><span class="status-badge status-4xx">401</span></td>
                        <td>UNAUTHORIZED</td>
                        <td>用户没有权限(令牌失效、用户名、密码错误、登录过期)</td>
                    </tr>
                    <tr>
                        <td><span class="status-badge status-4xx">402</span></td>
                        <td>TOKEN_EXPIRED</td>
                        <td>令牌过期</td>
                    </tr>
                    <tr>
                        <td><span class="status-badge status-4xx">403</span></td>
                        <td>FORBIDDEN</td>
                        <td>用户得到授权，但是访问是被禁止的</td>
                    </tr>
                    <tr>
                        <td><span class="status-badge status-4xx">404</span></td>
                        <td>NOT_FOUND</td>
                        <td>访问资源不存在</td>
                    </tr>
                    <tr>
                        <td><span class="status-badge status-4xx">406</span></td>
                        <td>NOT_ACCEPTABLE</td>
                        <td>请求格式不可得</td>
                    </tr>
                    <tr>
                        <td><span class="status-badge status-4xx">410</span></td>
                        <td>GONE</td>
                        <td>请求资源被永久删除，且不会被看到</td>
                    </tr>

                    <!-- 5xx 服务器错误 -->
                    <tr>
                        <td><span class="status-badge status-5xx">500</span></td>
                        <td>INTERNAL_ERROR</td>
                        <td>服务器发生错误</td>
                    </tr>
                    <tr>
                        <td><span class="status-badge status-5xx">502</span></td>
                        <td>BAD_GATEWAY</td>
                        <td>网关错误</td>
                    </tr>
                    <tr>
                        <td><span class="status-badge status-5xx">503</span></td>
                        <td>SERVICE_UNAVAILABLE</td>
                        <td>服务不可用，服务器暂时过载或维护</td>
                    </tr>
                    <tr>
                        <td><span class="status-badge status-5xx">504</span></td>
                        <td>GATEWAY_TIMEOUT</td>
                        <td>网关超时</td>
                    </tr>
                </tbody>
            </table>

            <div class="code-block">
                <div class="code-title">
                    <i class="fa fa-code"></i>
                    统一响应格式
                </div>
                <pre><code>{
    "code": 200,      // 响应状态码
    "message": "success",  // 响应信息
    "data": {         // 响应数据
        // ... 具体的业务数据
    }
}</code></pre>
            </div>
        </div>
    </div>
</body>
</html> 